<template>
  <!-- 主机查看详情对话框 -->
  <el-dialog
    v-if="detailDdialogVisible"
    :visible.sync="detailDdialogVisible"
    top="70px"
    width="50%"
    @opened="opened()"
    @open="open()"
    :before-close="closeDialog"
  >
    <span class="main">
      <!-- 主机基本信息 -->
      <div class="info hostInfo">
        <div class="infoTitle">
          <i class="el-icon-info"></i>
          <h4>
            {{ $t("hostDialog.title.basic1") }}({{ hostDetail.client.name }})
            {{ $t("hostDialog.title.basic2") }}
          </h4>
        </div>
        <div class="infoContent">
          <div>
            <b>{{ $t("hostDialog.form.ip") }}</b
            >：<span class="myContent">
              <span
                v-if="!showEdit"
                @dblclick="(showEdit = true), (autofocus = true)"
                >{{ hostDetail.client.ip }}</span
              >
              <el-input
                size="mini"
                style="width: 70%"
                v-model="hostDetail.client.ip"
                v-if="showEdit"
                :autofocus="autofocus"
                @blur="(autofocus = false), (showEdit = false)"
              ></el-input>
            </span>
          </div>
          <div>
            <b>{{ $t("hostDialog.form.mac") }}</b
            >:<span class="myContent">{{ hostDetail.client.mac_address }}</span>
          </div>
          <div>
            <b>{{ $t("hostDialog.form.operator") }}</b
            >：<span class="myContent">{{
              hostDetail.client.service_provider
            }}</span>
          </div>
          <!-- <div><b>部署国家</b>：<span class="myContent">英格兰</span></div> -->
          <div>
            <b>{{ $t("hostDialog.form.bandwidth") }}</b
            >：<span class="myContent">{{ hostDetail.client.wide_band }}</span>
          </div>
          <div>
            <b>{{ $t("hostDialog.form.price") }}</b
            >：<span class="myContent">￥{{ hostDetail.client.price }}</span>
          </div>
          <div>
            <b>{{ $t("hostDialog.form.time") }}</b
            >：<span class="myContent">{{ hostDetail.client.due_date }}</span>
          </div>
          <div>
            <b>{{ $t("hostDialog.form.port") }}</b
            >：<span class="myContent">{{ hostDetail.client.port }}</span>
          </div>
        </div>
      </div>
      <!-- 设备信息 -->
      <div class="info deviceInfo">
        <div class="infoTitle">
          <i class="el-icon-info"></i>
          <h4>{{ $t("hostDialog.title.equipment") }}</h4>
          <el-select
            v-model="lastDay"
            placeholder="Please select"
            size="mini"
            style="width: 120px; margin: -6px 0 0 10px"
            @change="selectChange"
          >
            <el-option label="1 day" value="1"></el-option>
            <el-option label="3 days" value="3"></el-option>
            <el-option label="7 days" value="7"></el-option>
          </el-select>
        </div>
        <div class="infoContent">
          <div id="statChart" :style="{ width: '100%', height: '500px' }"></div>
        </div>
      </div>
      <!-- 系统信息 -->
      <div class="info systemInfo">
        <div class="infoTitle">
          <i class="el-icon-info"></i>
          <h4>{{ $t("hostDialog.title.system") }}</h4>
        </div>
        <div class="infoContent">
          <div>
            <b>{{ $t("hostDialog.form.system") }}</b
            >：<span class="myContent">{{
              hostDetail.client.operating_system
            }}</span>
          </div>
          <!-- <div><b>口令</b>:<span class="myContent">SJKO156</span></div> -->
          <div>
            <b>{{ $t("hostDialog.form.password") }}</b
            >：
            <el-tooltip
              class="item"
              effect="dark"
              :content="hostDetail.client.password"
              placement="top"
            >
              <span class="myContent">{{ hostDetail.client.password }}</span>
            </el-tooltip>
          </div>
        </div>
      </div>
      <!-- 其他信息 -->
      <div class="info otherInfo">
        <div class="infoTitle">
          <i class="el-icon-info"></i>
          <h4>{{ $t("hostDialog.title.other") }}</h4>
        </div>
        <div class="aboutTaskList">
          <!-- <div class="content content1">
            <h3 class="aboutTaskTitle">任务爬虫</h3>
            <el-table :data="hostDetail.reptile" style="width: 100%">
              <el-table-column prop="en_name" label="名称"> </el-table-column>
              <el-table-column prop="description" label="描述">
              </el-table-column>
              <el-table-column prop="state" label="状态"> </el-table-column>
            </el-table>
          </div> -->
          <div class="content content2">
            <h3 class="aboutTaskTitle">{{ $t("hostDialog.title.rely") }}</h3>
            <el-table :data="dependent_file" style="width: 100%">
              <el-table-column
                prop="name"
                :label="$t('hostDialog.form.yl_name')"
              >
              </el-table-column>
              <el-table-column
                prop="description"
                :label="$t('hostDialog.form.yl_descript')"
              >
              </el-table-column>
              <!-- <el-table-column prop="state" label="状态"> </el-table-column> -->
            </el-table>
          </div>
          <!-- <div class="content content3">
            <h3 class="aboutTaskTitle">VNC</h3>
            <el-table :data="hostDetail.reptile" style="width: 100%">
              <el-table-column prop="en_name" label="名称"> </el-table-column>
              <el-table-column prop="description" label="描述">
              </el-table-column>
              <el-table-column prop="state" label="状态"> </el-table-column>
            </el-table>
          </div> -->
        </div>
      </div>
    </span>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button @click="closeDialog">取 消</el-button> -->
      <!-- <el-button @click="showEdit = true">编 辑</el-button> -->
      <!-- <el-button type="primary" @click="closeDialog">确 定</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["detailDdialogVisible", "hostDetail", "warningRuleList"],
  data() {
    return {
      lastDay: "7",
      showEdit: false,
      autofocus: false,
      test: {},
      // 依赖库
      dependent_file: [],
      //设备信息
      performance: [],
      // 设备信息的选项
      echartLegend: [],
      // 横坐标
      arr: [],
      repliteList: [],
      // 显示异常数据
      visualMapData: [],
      otherInfoList: [
        { name: "123456", description: "789456", state: "nfdjsj" },
        { name: "123456", description: "789456", state: "nfdjsj" },
        { name: "123456", description: "789456", state: "nfdjsj" },
        { name: "123456", description: "789456", state: "nfdjsj" },
      ],
      statCharts: "",
      isShow: false,
    };
  },
  methods: {
    open() {},
    opened() {
      this.performance = [];
      this.arr = [];
      this.echartLegend = [];
      // 设备图标的横坐标
      this.arr = this.hostDetail.performance.find((val) => {
        return val.name == "date_list";
      }).data;
      // 将date_list移除，才能更好的展示异常数据 在此之前需要先把横坐标获取出来
      let date = this.hostDetail.performance.find((val) => {
        return val.name == "date_list";
      });
      this.hostDetail.performance.remove(date);
      let echart_color = [
        "#d87c7c",
        "#919e8b",
        "#d7ab82",
        "#6e7074",
        "#61a0a8",
        "#efa18d",
        "#787464",
        "#cc7e63",
        "#724e58",
        "#4b565b",
      ];
      // 设备信息
      this.hostDetail.performance.forEach((val, index, arr) => {
        // 将日期数据date_list排除
        if (val.name != "date_list") {
          // 图标上方的选项
          this.echartLegend.push(val.name);

          // 图表的数据
          let obj = {};
          obj.name = val.name;
          // yAxisIndex: 1,//对应第二个y轴
          if (
            val.name == "CPU" ||
            val.name == "Memory" ||
            val.name == "Total_disk_usage"
          ) {
            obj.yAxisIndex = 1;
          } else {
            obj.yAxisIndex = 0;
          }
          obj.type = "line";
          obj.symbol = "none"; // 折线图转折地方的样式
          obj.data = val.data;
          this.performance.push(obj);
          console.log(this.performance);

          // // 根据数据调整线段颜色
          // visualMap: {
          //   show: false,
          //   seriesIndex: 0, // 如果有多条折线可利用此属性区别渲染哪条折线
          //   pieces: [
          //     {
          //       gte: 10,
          //       lte: 80,
          //       // color: "#FD0100",
          //     },
          //   ],
          //   outOfRange: {
          //     color: "#FD0100",
          //   },
          // },
          if (val.name != "Network_down" && val.name != "Network_on") {
            let visualArr = {};
            visualArr.show = false;
            visualArr.seriesIndex = index;
            visualArr.outOfRange = {
              color: "#FD0100",
            };
            visualArr.inRange = {
              color: echart_color[index],
            };

            switch (val.name) {
              case "CPU":
                let cpu = this.warningRuleList.find((ele) => {
                  return ele.type == 1;
                });
                if (cpu) {
                  visualArr.pieces = [
                    {
                      gte: cpu.value_range_start,
                      lte: cpu.value_range_end,
                    },
                  ];
                }

                break;
              case "Memory":
                let memory = this.warningRuleList.find((ele) => {
                  return ele.type == 2;
                });
                if (memory) {
                  visualArr.pieces = [
                    {
                      gte: memory.value_range_start,
                      lte: memory.value_range_end,
                    },
                  ];
                }
                break;
              case "Total_disk_usage":
                let cipan = this.warningRuleList.find((ele) => {
                  return ele.type == 3;
                });
                if (cipan) {
                  visualArr.pieces = [
                    {
                      gte: cipan.value_range_start,
                      lte: cipan.value_range_end,
                    },
                  ];
                }
                break;
              default:
                break;
            }
            this.visualMapData.push(visualArr);
          }
        }
      });
      console.log(this.visualMapData);
      let now = new Date().getTime();
      // console.log(new Date(now).getDay());

      // console.log(now);
      // 依赖库
      this.dependent_file = eval(this.hostDetail.client.dependent_file);
      this.$nextTick(() => {
        this.statChart(this.isShow);
      });
    },
    // echarts渲染
    statChart(show) {
      // if (statChart) {
      console.log("销毁图表实例");
      this.$echarts.init(document.getElementById("statChart")).dispose();
      // }
      // 基于准备好的dom，初始化echarts实例
      let statChart = this.$echarts.init(
        document.getElementById("statChart"),
        "chalk"
      );
      // 绘制图表
      statChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        // 超出范围显示异常 红色
        visualMap: this.visualMapData,
        // 图表上方内容选项
        legend: {
          data: this.echartLegend,
        },
        xAxis: [
          {
            show: "false",

            type: "category",
            boundaryGap: false,
            // data: ["1", "2", "3"],
            data: this.arr,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "Network_on/down",
            nameLocation: "end",
            axisLabel: {
              formatter: "{value} Mb/s",
              align: "right",
            },
          },
          {
            type: "value",
            name: "CPU/Memory/disk",
            nameLocation: "end",
            axisLabel: {
              formatter: "{value} %",
              align: "left",
            },
          },
        ],
        series: this.performance,
      });
      // statChart.setOption({
      //   // 根据数据调整线段颜色
      //   visualMap: {
      //     show: false,
      //     seriesIndex: 0, // 如果有多条折线可利用此属性区别渲染哪条折线
      //     pieces: [
      //       {
      //         gte: 10,
      //         lte: 80,
      //         // color: "#FD0100",
      //       },
      //     ],
      //     outOfRange: {
      //       color: "#FD0100",
      //     },
      //   },
      // });
    },
    // 图表中显示异常与否
    // showAbnormal() {
    //   this.isShow = !this.isShow;
    //   this.statChart(this.isShow);
    // },
    // 当天数发生改变
    async selectChange(val) {
      const { data: res } = await this.$http.get("/host/device_details", {
        params: { client_id: this.hostDetail.client.id, day: val },
      });
      this.hostDetail.performance = res.data;
      this.opened();
      console.log(res);
    },
    // 关闭弹出框
    closeDialog() {
      this.lastDay = "7";
      this.visualMapData = [];
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang='less' scoped>
.main {
  overflow-x: hidden;
  overflow-y: scroll;
  display: block;
  margin-top: -20px;
  height: 640px;
  &::-webkit-scrollbar {
    display: none;
  }
  .info {
    margin-top: 20px;
    .infoTitle {
      display: flex;
      margin-bottom: 10px;
      h4 {
        font-size: 18px;
        line-height: 14px;
        // background-color: #b9b9b9;
      }
    }
    .infoContent {
      display: flex;
      flex-wrap: wrap;
      padding-left: 16px;

      div {
        width: 33%;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        white-space: nowrap;
      }
      .myContent {
        display: inline-block;
        max-width: 180px;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: bottom;
      }
    }
  }
  .aboutTaskList {
    .content {
      // display: flex;
      margin-top: 20px;
      .aboutTaskTitle {
        width: 100%;
        padding: 5px;
        border-radius: 30px 30px 0px 0px;
        text-align: center;
        color: #606266;
      }
    }
    .content1 {
      .aboutTaskTitle {
        background-color: #e69d87;
      }
      .el-table {
        border: 1px solid #e69d87;
      }
    }
    .content2 {
      .aboutTaskTitle {
        background-color: #bae687;
      }
      .el-table {
        border: 1px solid #bae687;
      }
    }
    .content3 {
      .aboutTaskTitle {
        background-color: #87c0e6;
      }
      .el-table {
        border: 1px solid #87c0e6;
      }
    }
  }
}
</style>